<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>天气数据</title>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous">
    </script>
</head>
<script>
    $(function (){
        //给下拉框绑定改变事件
        $("#city").change(function (){
            // alert($(this).val()) //打印输出
            window.location.href='http://localhost:6001/weather/show?cityid='+$(this).val()
        })
    })
</script>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f8ff; /* 淡蓝色背景 */
        color: #333; /* 深色文本 */
        margin: 0;
        padding: 20px;
    }

    h1 {
        text-align: center;
        color: #4a90e2; /* 标题颜色 */
    }

    span {
        font-size: 1.1em;
    }

    select {
        padding: 5px;
        margin: 10px 0;
        border: 1px solid #428de5;
        border-radius: 5px;
        background-color: #fff;
        font-size: 1em;
    }

    .Weathertable {
        display: flex;
        flex: 1; /* 使每个天气信息均匀分布 */
        margin: 10px; /* 减少边距 */
        padding: 10px;
        border-radius: 10px;
        background-color: #ffffff; /* 白色背景 */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
        box-sizing: border-box; /* 包括边框和内边距 */
    }

    .Weathertable div {
        flex: 1; /* 使每个天气信息均匀分布 */
    }

    .Weathertable img {
        width: 50px;
        height: 50px;
    }

    .weather-info {
        display: flex;
        flex-direction: column; /* 纵向排列 */
        justify-content: center; /* 垂直居中 */
        font-size: 13px;
        margin-top: 5px;
    }

    .temperature-display {
        display: flex;
        flex-direction: row;
    }
    .low-temp {
        color: #57c2e5; /* 低温颜色 */
    }
    .high-temp {
        color: #f86279; /* 高温颜色 */
    }

    .footer {
        text-align: center;
        margin-top: 20px;
        font-size: 0.9em;
        color: #777;
    }

</style>
<body>
    <h1> Christin's 天气数据</h1>
    <span >请选择城市：</span>
    <select id="city">
        <option th:each="ct:${cityList}" th:value="${ct.code}" th:text="${ct.name}" th:selected="${ct.code eq cityid}"></option>
    </select>
    <p>地区：<span style="color: goldenrod" th:text="${weatherResponse.result.area}">无数据</span></p>
    <p>未来七天天气数据：</p>
    <div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
        <div class="Weathertable" th:each="w:${weatherResponse.result.list}">
            <div class="weather-info">
                日期：<span th:text="${w.date}">无数据</span><br>
                星期：<span th:text="${w.week}">无数据</span><br>
                天气：<span th:text="${w.weather}">无数据</span><br>
                温度：<span th:text="${w.real}">无数据</span><br>
                <div class="temperature-display">
                    <span class="low-temp" th:text="${w.lowest}">无数据</span>
                    <span>&nbsp;&nbsp; --- &nbsp;&nbsp;</span>
                    <span class="high-temp" th:text="${w.highest}">无数据</span>
                </div>
            </div>
            <img th:src="@{/images/{img}(img=${w.weatherimg})}" />
        </div>
    </div>
    <div class="footer">
        &copy; 2024 天气数据提供者
    </div>

</body>
</html>